<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="班次名称">
						<el-input v-model="state.param.keyword" placeholder="输入班次名称" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData" style="width: 100%"> 
						<el-table-column label="班次名称" prop="name">
							<template #default="scope">
								<el-input v-show="scope.row.edit" v-model="scope.row.name" placeholder="输入班次名称" clearable   ></el-input>
								<span v-show="!scope.row.edit">{{ scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="上班时间" >
							<template #default="scope">
								<el-time-picker v-if="scope.row.edit"
								format="hh:mm:ss"
								value-format="hh:mm:ss" v-model="scope.row.startWorkTime" placeholder="上班时间"  />
								<!-- <el-date-picker v-if="scope.row.edit" v-model="scope.row.startWorkTime" 
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								type="date" placeholder="上班时间"  /> -->
								<span v-show="!scope.row.edit">{{ scope.row.startWorkTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="下班时间" >
							<template #default="scope">
								<el-time-picker v-if="scope.row.edit"
								format="hh:mm:ss"
								value-format="hh:mm:ss" v-model="scope.row.offWorkTime"  placeholder="下班时间" />
								<!-- <el-date-picker  v-model="scope.row.offWorkTime"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								type="date" placeholder="下班时间"  /> -->
								<span v-show="!scope.row.edit">{{ scope.row.offWorkTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="旷工时间(分钟)" > 
							<template #default="scope">
								<el-input-number v-show="scope.row.edit"
								v-model="scope.row.neglectWorkTime" :min="0" :max="60"   />
								<span v-show="!scope.row.edit">{{ scope.row.neglectWorkTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作人" prop="user" /> 
						<el-table-column label="操作" width="160" align="center">
							<template #default="scope">
								<section v-if="scope.row.default">
									禁止操作
								</section>
								<section v-else>
									<section v-show="scope.row.edit">
										<el-link :underline="false" type="primary" @click="submitHandle(scope.row)">提交</el-link>&emsp;
										<el-link :underline="false" type="danger" @click="cancelHandle(scope.row)">取消</el-link>
									</section>
									<section v-show="!scope.row.edit">
										<el-link :underline="false" type="primary" @click="editHandle(scope.row)">编辑</el-link>&emsp;
										<el-link :underline="false" type="danger" @click="deleteHandle(scope.row)">删除</el-link>
									</section>
								</section>
							</template>
						</el-table-column>
					</el-table>
					<section class="mt15">
						<el-row justify="center">
							<el-button type="primary" @click="addMember">
									+ 新 增
								</el-button>
						</el-row> 
					</section>
				</section>
			</el-card>
		</div> 
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive} from 'vue'; 
import { ElMessageBox } from 'element-plus' 


interface ITemplate {
	id: number,
	name: string,
	startWorkTime: string,
	offWorkTime: string,
	neglectWorkTime: number | string,
	edit: boolean,
	user: string,
	default: boolean
}

const state = reactive({ 
	param: {
		keyword: '', 
		dateTime: '',
		total: 0, 
		pageNum: 1,
		pageSize: 10,
		rowId: 0,
	}, 
	loading: false,
	total: 0,
	tableData: [
		{
			id: 1,
			name: '默认班次',
			startWorkTime: '09:00:00',
			offWorkTime: '18:00:00',
			neglectWorkTime: '-',
			edit: false,
			user: '-', 
			default: true
		}
	] as Array<ITemplate>,
	userName: '', 
	type: 0	
});
 
const search = () => {}

const editHandle = (row: ITemplate) => {
	row.edit = true
}
const submitHandle = (row: ITemplate) => {
	row.edit = false
}

const deleteHandle = (row: ITemplate) => {
	ElMessageBox.confirm(
		'确定删除吗 ?',
		'提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	.then(() => {
		state.tableData = state.tableData.filter(item => item.id !== row.id)
	})
	.catch(() => {
		
    })
}

const cancelHandle = (row: ITemplate) => {
	row.edit = false
}

const addMember = () => {
	state.tableData.push({
		name: '',
		offWorkTime: '',
		startWorkTime: '',
		neglectWorkTime: 0,
		id: Math.random() * 10000, 
		edit: true,
		user: '',
		default: false
	})
}

// 页面加载时
onMounted(() => {
});
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>